<!--数字-->
<template>
	<el-input-number
		v-model="value"
		v-bind="allAttrs"
		:id="'zhNumber' + columnId"
		:name="'zhNumber' + columnId"
		:size="mySize"
		:controls-position="allAttrs['controls-position'] ?? 'right'"
		:clearable="clearable"
	>
    <template #[item]="data" v-for="item in Object.keys($slots)">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
	</el-input-number>
</template>

<script lang="ts" setup>
// 引入组件需要的属性 引入表单子控件的管理类
import { itemProps, itemController } from '../lib/mapController';
// 定义属性
const props = defineProps({
	...itemProps, // 基础属性
	'controls-position': {
		type: String,
		default: 'right',
	},
	modelValue: [String, Number],
});
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue']);
const allAttrs = computed(() => {
	return Object.assign(props.extend, attrs);
});
const { value, globalSize } = itemController(props, allAttrs.value, emit);
const state = reactive({
	mySize: allAttrs.value.size,
});
// 初始化
globalSize(state);
// 输出
const { mySize } = toRefs(state);
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-number',
	inheritallAttrs: false,
};
</script>
